<template>
  <div class="loginmain">
    <div class="header"></div>
    <el-form class="demo-ruleForm myform" :model="loginform" status-icon :rules="rules" ref="loginform">
        <el-form-item label="手机号" prop="phone">
            <el-input type="text" name="mobile" v-model="loginform.phone" auto-complete="off" placeholder="请输入手机号" style="background-color:transparent;"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input type="password" name="password" v-model="loginform.password" autocomplete="off" style="background-color:transparent;"></el-input>
        </el-form-item>
       <div class="remember">
        <div class="remleft" v-on:click="remberpwd">
            <input id="rempwd" type="checkbox">
            <label for="rempwd">记住密码</label>
        </div>
        <a>忘记密码</a>
       </div>
       <el-button v-on:click="login" type="primary" plain style="margin-top:0.5rem;width:100%">登录</el-button>
    </el-form>
    <div class="otherlogin">
        <div class="line"></div>
        <span style="margin-top:-5px">其他方式登录</span>
        <div class="line"></div>
        <span class="iconfont wxiocn" @click="wxlogin">&#xe73b;</span>
    </div>
  </div>
</template>
<script>
import Router from '../../router'
export default {
  name: 'login',
  data () {
    var rulephone = (rule, value, callback) => {
      let reg = /^1[34578]\d{9}$/
      if (value === '') {
        return callback(new Error('请输入手机号码'))
      } else if (!reg.test(value)) {
        return callback(new Error('手机号格式错误'))
      }
    }
    var rulepwd = (rule, value, callback) => {
      if (value === '') {
        return callback(new Error('请输入密码'))
      }
    }
    return {
      loginform: {
        phone: '',
        password: ''
      },
      rules: {
        phone: [
          { validator: rulephone, trigger: 'blur' }
        ],
        password: [
          { validator: rulepwd, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    login: function () {
      var _this = this
      var phone = _this.loginform.phone
      var pwd = _this.loginform.password
      _this.$axios({
        method: 'get',
        url: '/api.php/Login/index',
        params: {
          mobile: phone,
          password: pwd
        }
      }).then(function (response) {
        let data = response.data
        // var token = response.body['access-token']
        // console.log('my token' + token)
        if (data.result === 200) {
          // 存入手机号，便于后面run查询数据
          _this.$store.commit('set_user', {phone: phone, password: pwd})
          // 存入token，进行用户身份认证
          _this.$store.commit('set_token', data['Authentication-Token'])
          Router.replace('/index')
        } else {
          var msg = response.data.message
          _this.$alert(msg, '未成功登录', {
            confirmButtonText: '确定'
          })
        }
      }).catch(function (error) {
        console.log(error)
      })
    },
    wxlogin: function () {
      this.$axios({
        url: '',
        method: 'post',
        data: {

        }
      }).then(function (res) {
        console.log(res)
      })
    },
    // 记住用户名密码
    remberpwd () {
      localStorage.setItem('currentUser_name', this.mobile)
      localStorage.setItem('currentUser_pwd', this.password)
    }
  }
}
</script>
<style lang="stylus">
.el-message-box
  width 80%
.loginmain
    display flex
    flex-direction column
    width 100%
    height 13.34rem
    align-items center
    justify-content center
    background-image url('../../assets/images/bg.jpg')
    background-repeat no-repeat
    background-size cover
    .header
      width 1.6rem
      height 1.6rem
      border-radius 50%
      background-image url('../../assets/images/bg.jpg')
      background-size cover
    .myform
      width 60%
      margin-top 1rem
      .remember
        display flex
        margin-top 0.5rem
        justify-content: space-between
    .otherlogin
      width 7rem
      height 2rem
      margin-top 0.4rem
      text-align center
      padding-top 1rem
      display flex
      justify-content space-between
      flex-wrap wrap
      .line
       width 2.5rem
       height .02rem
       background #666
      .wxiocn
        font-size 0.8rem
        color green
        margin-left 3.2rem
</style>
